body{
    background-image: url("../image/background-img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
/* 博客编辑页样式 */

.blog-edit-container{
    /* 编辑页最大尺寸 */
    width: 800px;
    height: calc(100% - 50px);
    margin: 0 auto;
    word-wrap: break-word; /* 设置自动换行 */

    /* 解决 符号溢出自动换行时 格式错误的情况*/
    line-break: anywhere;
}



.blog-edit-container .title{
    /* 盒子50高度 */
    height: 50px;
    /* 开启弹性布局  */
    display: flex;
    /* 排列 内部元素 文本框 按钮 中间空格分开 */
    justify-content: space-between;
    align-items: center;
}

/* 文本框样式 */
#title{
    /* 内部文本框40高度盒子50 上下5高度 */
    display: block;
    height: 40px;
    /* 宽度 695 预留5px和 按钮的间距 */
    width: 695px;

    /* 文本框内字体大小和左边距 */
    font-size: 20px;
    padding-left: 5px;

    /* 圆角矩形 去边框 */
    border: none;
    border-radius: 10px;

    /* 去除鼠标选择 输入时的轮廓线 黑圈 */
    outline: none;

    /* 没选择时是透明状态 */
    background-color: rgba(255,255,255,0.7);
    word-wrap: break-word; /* 设置自动换行 */

    /* 解决 符号溢出自动换行时 格式错误的情况*/
    line-break: anywhere;
}

/* 当前文本框获得焦点时更换样式 */
#title:focus{
    /* 选择文本框时是纯白 */
    background-color: white;

}

/* 提交按钮 样式 */
#submit,#save{
    /* 按钮尺寸 */
    height: 40px;
    width: 100px;
    /* 按钮颜色 */
    background-color: orange;
    /* 圆角矩形 去边框 */
    border-radius: 10px;
    border: none;
    margin-left: 5px;
}

/* 单击按钮 变背景样式 */
#submit:active{
    background-color: grey;
}

/* 编辑框格式 */
#editor{
    /* 圆角矩形 */
    border-radius:10px ;
    /* 此处直接设置背景颜色半透明 是设置的editor元素 而其引用其他jscss代码有很多子元素它们没有设置透明那效果就不明显 */
    /* background-color: rgba(255,255,255,0.7); */
    
    /* 让当前元素和其子元素都设置透明格式 */
    opacity: 80%;
}
.nav button{
    background-color: rgba(173,173,173);
    border-radius: 10px;
}

.nav button:active{
    background-color: yellow;
}


